<template>
  <div class="nav-bar z-index-max" :style="navBarStyle" :class="{'bottom-line' : pageName}">
    <div class="statusBar"></div>
    <!-- 左 -->
    <div class="left">
      <!-- 默认状态 -->
      <img v-show="isShowBackIcon" class="img" src="@img/返回.png" alt="">
      <!-- 具名插槽 -->
      <slot name="nav-left"></slot>
    </div>
    <!-- 中 -->
    <div class="center">
      <!-- 默认状态 -->
      <span v-show="pageName" class="page-title">{{pageName}}</span>
      <!-- 具名插槽 -->
      <slot name="nav-center"></slot>
    </div>
    <!-- 右 -->
    <div class="right">
      <!-- 默认状态 -->
      <!-- 具名插槽 -->
      <slot name="nav-right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavigationBar',
  props: {
    pageName: {
      type: String,
      default: ''
    },
    // 判断是否显示返回按钮
    isShowBackIcon: {
      type: Boolean,
      default: false
    },
    // navBarStyle样式
    navBarStyle: {
      type: Object,
      default: function () {
        return {
          backgroundColor: ''
        }
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.nav-bar
  // 所有组件上优先显示
  // z-index 99999
  width 100%
  height 88px
  line-height 44px
  display flex
  justify-content space-between
  .statusBar
    height 44px
  .left
    display flex
    height 30px
    width 30px
    padding-left 6px
    align-self flex-end
    margin-bottom 6px
    img
      height 23px
      width 23px
      align-self center
  .right
    display flex
    height 30px
    width 30px
    padding-right  6px
    align-self flex-end
    margin-bottom 6px
    img
      height 23px
      width 23px
      align-self center
  .center
    height 100%
    flex-grow 1
      .page-title
        font-size 15px
        align-self flex-end
.bottom-line
  border-bottom 1px solid $lineColor
</style>
